﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Tables</title>
    <link type="text/css" href="../base.css" rel="stylesheet">
    <link type="text/css" href="index.css" rel="stylesheet">
</head>
<body>
<nav>
    CSS Course by @Castle
</nav>
<div id="body">
    <h1 class="page-title">Table</h1>

    <table width="100%">
        <tr>
            <td>test</td>
            <td>test</td>
            <td>test</td>
        </tr>
    </table>

    <h1 class="page-title">Table Cell</h1>
    <table width="100%">
        <tr>
            <td>
                <p>A new line</p>
                <p>A new line</p>
                <p>A new line</p>
                <p>A new line</p>
                <p>A new line</p>
                <p>A new line</p>
            </td>

            <td style="vertical-align: top;">Align me!</td>
        </tr>
    </table>


    <h1 class="page-title">Table Row Hover Effect</h1>
    <table width="100%">
        <tr>
            <td>Row 1 Cell 1</td>
            <td>Row 1 Cell 2</td>
        </tr>
        <tr>
            <td>Row 2 Cell 1</td>
            <td>Row 2 Cell 2</td>
        </tr>
        <tr>
            <td>Row 3 Cell 1</td>
            <td>Row 3 Cell 2</td>
        </tr>
        <tr>
            <td>Row 4 Cell 1</td>
            <td>Row 4 Cell 2</td>
        </tr>
    </table>

</div>
</body>
</html>